<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine"
    :visible.sync="dialogVisible"
    width="750px"
  >
    <div v-loading="dialogLoading">
      <div>
        <el-row>
          <el-col :span="11">
            <div class="transfer_wrap gl_mb_15">
              <div class="transfer_title gl_clear">
                <span class="gl_fl">可选成员</span>
              </div>
              <div class="transfer_content">
                <div v-for="(item, index) in leftList" :key="index" class="gl_mb_5">
                  <el-radio v-model="currentMember" :disabled="item._select || (item.ctaMemberStatusCode!=='Normal' && gameInfo.setting.isEntryMemberRule)" :label="item">
                    <span class="gl_mr_5">{{ item.name }}</span>
                    <span v-if="item.genderCode === 'M'">(男)</span>
                    <span v-if="item.genderCode === 'W'">(女)</span>
                  </el-radio>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :offset="2" :span="11">
            <div class="transfer_wrap gl_mb_15">
              <div class="transfer_btn_wrap" @click="changeMemberToRight()">
                <i class="transfer_btn el-icon-d-arrow-right" title="将选择的成员移至此处" />
              </div>
              <div class="transfer_title gl_clear">
                <span class="gl_fl">已选成员</span>
                <span class="gl_fr">{{ computeRightListLen }}/{{ maxSelectMemberNum }}</span>
              </div>
              <div class="transfer_content">
                <div v-if="mainMember.id" class="gl_mb_5 gl_clear">
                  <span class="gl_fl">{{ mainMember.name }}</span>
                  <span v-if="mainMember.genderCode === 'M'">(男)</span>
                  <span v-if="mainMember.genderCode === 'W'">(女)</span>
                </div>
                <div v-for="(jtem, jndex) in rightList" :key="jndex" class="gl_mb_5 gl_clear">
                  <span class="gl_fl">{{ jtem.name }}</span>
                  <span v-if="jtem.genderCode === 'M'">(男)</span>
                  <span v-if="jtem.genderCode === 'W'">(女)</span>
                  <i class="el-icon-close gl_pointer gl_fr" @click="removeMember(jtem, jndex)" />
                </div>
                <div v-if="!rightList.length && !mainMember.id" class="transfer_nodata">请选择成员</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row class="gl_mt_15">
        <el-col v-if="teamEntry.teamEntryId" :span="12">
          <el-button type="danger" size="mini" @click="deleteGroup()">删除整组</el-button>
        </el-col>
        <el-col :span="teamEntry.teamEntryId ? 12 : 24" align="right">
          <el-button type="default" size="mini" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="submit()">确定</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '成员选择'
    },
    ignoreCheck: {
      type: Boolean,
      default: false
    },
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    requireMember: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    minSelectMemberNum: {
      type: Number,
      default: 1
    },
    maxSelectMemberNum: {
      type: Number,
      default: 0
    },
    optionMember: {
      type: Array,
      default() {
        return [];
      }
    },
    selectMember: {
      type: Array,
      default() {
        return [];
      }
    },
    teamEntry: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogLoading: false,
      currentMember: '',
      mainMember: {},
      leftList: [],
      rightList: [],
      computeSelectMemberNum: 0
    };
  },
  computed: {
    computeRightListLen () {
      if (this.requireMember.id || this.requireMember.registerId) {
        return this.rightList.length + 1;
      } else {
        return this.rightList.length;
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) {
        // 窗口关闭
        this.currentMember = '';
        this.mainMember = {};
        this.leftList = [];
        this.rightList = [];
      }
    }
  },
  methods: {
    // 打开
    open () {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.initData();
      });
    },
    close () {
      this.dialogLoading = false;
      this.dialogVisible = false;
    },
    hideLoading () {
      this.dialogLoading = false;
    },
    // 初始化数据，拷贝数据
    initData () {
      this.mainMember = JSON.parse(JSON.stringify(this.requireMember));
      const _optionMember = JSON.parse(JSON.stringify(this.optionMember)) || [];
      const _selectMember = JSON.parse(JSON.stringify(this.selectMember)) || [];

      this.leftList = _optionMember.filter(item => item.id !== this.mainMember.id);
      this.rightList = _selectMember.filter(item => item.registerId !== this.mainMember.id);
      this.matchMainMemberFromRightList();
    },
    // 从右侧列表中：匹配必选人员是否存在；匹配左侧列表是否存该人员
    matchMainMemberFromRightList () {
      for (let i = 0; i < this.rightList.length; i++) {
        const item = this.rightList[i];
        const _iid = item.registerId || item.id;
        const findMember = this.leftList.find(ktem => {
          const _kId = ktem.registerId || ktem.id;
          return _kId === _iid;
        });
        if (findMember) { // 在左侧列表找到该人员
          findMember['_select'] = true;
        } else { // 在左侧列表没有找到该人员
          item['_select'] = true;
          this.leftList.push(item);
        }
      }
    },
    deleteGroup () {
      this.$confirm(`您确定要删除整组吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(
          () => {
            this.dialogLoading = true;
            this.$emit('onDeleteGroupMember');
          }
        );
    },
    // 确认按钮
    submit () {
      // 需要校验
      if (!this.ignoreCheck) {
        const _isPass = this.checkChooseListPass();
        // 校验未通过则直接返回
        if (!_isPass) return;
      }

      const _mainMember = JSON.parse(JSON.stringify(this.mainMember));
      const _rightList = JSON.parse(JSON.stringify(this.rightList));
      _rightList.unshift(_mainMember);
      this.dialogLoading = true;
      this.$emit('onTeamNoneCompetitionSubmit', _rightList);
    },
    // 校验选择的成员是否符合要求
    checkChooseListPass () {
      if (this.computeRightListLen < this.minSelectMemberNum) {
        this.$message({
          message: `最少应分配${this.minSelectMemberNum}名成员`,
          type: 'warning',
          showClose: true
        });
        return false;
      }

      return true;
    },
    // 移除右侧成员
    removeMember (item, index) {
      item['_select'] = false;
      this.rightList.splice(index, 1);
    },
    // 将所选成员移至右侧
    changeMemberToRight () {
      if (!this.currentMember) {
        this.$message({
          message: `请先选择要添加的成员`,
          type: 'warning',
          showClose: true
        });
        return;
      }
      if (this.computeRightListLen >= this.maxSelectMemberNum) {
        this.$message({
          message: `已达到最大成员数量，无法继续添加成员`,
          type: 'warning',
          showClose: true
        });
        return;
      }

      this.currentMember['_select'] = true;
      this.rightList.push(this.currentMember);
      this.currentMember = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.transfer_wrap {
  position: relative;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ebebeb;
}
.transfer_title {
  width: 100%;
  height: 28px;
  padding: 0 10px;
  line-height: 28px;
  font-size: 13px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebebeb;
}
.transfer_content {
  padding: 10px;
  height: 260px;
  overflow-y: auto;
}
.transfer_btn {
  font-size: 24px;
  cursor: pointer;
  color: #1890ff;
  &:hover {
    color: #46a6ff;
  }
}
.transfer_btn_wrap {
  position: absolute;
  left: -35px;
  top: 50%;
  margin-top: -12px;
}
.transfer_nodata {
  color: #c5c8ce;
  text-align: center;
}
</style>
